/**
 * 路由传参：
 *    1. search 传参  （?号传递参数）
 *    2. params 传参  （动态路由参数）
 *    3. state 传参   （state传参）
 *
 * 说一说这三者的区别：
 *    相同点，都是处理路由传参的。
 *    不同点：
 *      1. search 与 params 都会在url地址上有所表现，state 不会在url上有表现。
 *        当如果需要将这个url地址作为分享链接时，使用 state 会有问题。
 *      2. 要不要在路由规则中事先占位定义, params 需要，其他不需要
 *      3. 传参方式与取参的方式不同
 *        1. search: ?号传递，通过 props.location.search 获取
 *        2. params: 直接传递，通过 props.match.params 获取
 *        3. state: 通过 state 选项来传递。通过 props.location.state 获取
 *
 */

import { Route, Switch } from "react-router-dom";
import List from "./components/List";
import InfoOne from "./components/InfoOne";
import InfoTwo from "./components/InfoTwo";
import InfoThree from "./components/InfoThree";

function App() {
  return (
    <div>
      <h1>App</h1>
      <hr />
      <Switch>
        <Route path="/list" component={List} />
        {/* search 传参 */}
        {/* <Route path="/info" component={InfoOne} /> */}

        {/* params 传参
            1. 在定义路由规则的path时，需要配置动态参数
        */}
        {/* <Route path="/info/:id/:name" component={InfoTwo} /> */}

        {/* state 传参 */}
        <Route path="/info" component={InfoThree} />
      </Switch>
    </div>
  );
}

export default App;
